﻿<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>常用站点</title>
	<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
	<script type="text/javascript" src="newtab.js"></script>
	<style type="text/css">
		.site {
			display: inline-block;
			width: 4rem;
			border: 1px solid #ccc;
			padding: 0.5rem;
			margin: 0.5rem;
			padding-left: 2rem;
			position: relative;
		}

		.site .icon {
			height: 1.5rem;
			position: absolute;
			left: 0.25rem;
			top: 0.25rem;
		}

		.site .title {
			height: 1rem;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
			line-height: 1rem;
			text-align: left;
		}

		a {
			text-decoration: none;
			color: #000;
		}

		body {
			width: 68rem;
			margin: 0 auto;
			padding: 5em 10rem;
		}

		.panel {
			padding: 1rem;
			margin: 2rem;
		}

		.siteSet {
			border: 1px solid #ccc;
			margin-bottom: 2rem;
		}

		.siteSet legend {
			padding: 2px 10px;
			font-size: 1.5rem;
		}

		#searcher * {
			float: left;
			height: 2.5rem;
		}

		.engName {
			font-size: 1.5rem;
			padding-right: 1rem;
			width: 6rem;
			text-align: right;
		}

		.keywords {
			width: 35rem;
			padding: 0.5rem;
		}

		#search {
			padding: 0.4em 2rem;
			position: relative;
			background-color: #ffffff;
			left: -1px;
			border: 1px solid #ccc;
			cursor: pointer;
		}
	</style>
</head>

<body>
	<div id="title" class="panel">
		<form id="searcher" action="http://www.baidu.com/s">
			<span class="engName">百度搜索</span>
			<input name="wd" class="keywords" id="key" type="text" maxlength="100">
			<input id="search" class="btn search" type="button" value="搜索">
		</form>
		<div style="clear:both;"></div>
	</div>
	<div id="panel" class="panel"></div>
	<div id="footer" class="panel"></div>
	<div class="template" style="display:none;">

		<div id="siteTemp">
			<a href="#url#" target="_blank">
				<div class="site" data-id="#id#" data-parentId="#parentId#" title="#title#">
					<img class="icon" alt="#title#" src="#icon#">
					<div class="title" title="#title#">#title#</div>
				</div>
			</a>
		</div>
		<div id="siteSetTemp">
			<fieldset class="siteSet" data-id="#id#">
				<legend>#title#</legend>
			</fieldset>
		</div>

	</div>
</body>

</html>